/// ============ custom direction panel ===============
function customPanel(map,mapname,directions,div)
{
    var html = "";

    /// ===== local functions =====

    /// === waypoint banner ===
    function waypoint(point, type, address)
    {

        var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		
        html += '<table>';
        html += '  <tr style="cursor: pointer;" onclick='+target+'>';
        html += '    <td style="">';
        html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
        html += '    <\/td>';
        html += '    <td style="">';
        html +=        address;
        html += '    <\/td>';
        html += '  <\/tr>';
        html += '<\/table>';
    }

    /// === route distance ===
    function routeDistance(dist)
    {
        html += '<div style="">' + dist + '<\/div>';
    }

    /// === step detail ===
    function detail(point, num, description, dist)
    {
        var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
        html += '<table style="">';
        html += '  <tr style="cursor: pointer;" onclick='+target+'>';
        html += '    <td style="">';
        html += '      <a href="javascript:void(0)"> '+num+'. <\/a>';
        html += '    <\/td>';
        html += '    <td style="">';
        html +=        description;
        html += '    <\/td>';
        html += '    <td style="">';
        html +=        dist;
        html += '    <\/td>';
        html += '  <\/tr>';
        html += '<\/table>';
    }

    /// === Copyright tag ===
    function copyright(text)
    {
        html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
    }


    /// === read through the GRoutes and GSteps ===

    for (var i=0; i<directions.getNumRoutes(); i++)
    {
        if (i==0)
        {
            var type="play";
        }
        else
        {
            var type="pause";
        }

        var route = directions.getRoute(i);
        var geocode = route.getStartGeocode();
        var point = route.getStep(0).getLatLng();

        /// === Waypoint at the start of each GRoute
        waypoint(point, type, geocode.address);
        routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");

        for (var j=0; j<route.getNumSteps(); j++)
        {
            var step = route.getStep(j);
            /// === detail lines for each step ===
            detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
        }
    }

    /// === the final destination waypoint ===
    var geocode = route.getEndGeocode();
    var point = route.getEndLatLng();
    waypoint(point, "stop", geocode.address);

    /// === the copyright text ===
    copyright(directions.getCopyrightsHtml());

    /// === drop the whole thing into the target div
    div.innerHTML = html;
} /// ============ end of customPanel function ===========